<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src=js/jquery-3.1.1.js>
        
    </script>
    <style>
        body{
            font:12px/1.5 arial;
            color:#666;
        }
        ul,p{
            margin: 0;
            padding: 0;
        }
        #star{
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        #star span,#star ul{
            float: left;
            margin: 0 5px;
        }
        #star li{
            list-style: none;
            float: left;
            width: 28px;
            height: 20px;
            cursor: pointer;
            background-image: url(img/star.png);
            background-repeat: no-repeat;
        }
        #star li.on{
            background-position: 0 -20px;
        }
        #star p{
            position: absolute;
            top:20px;
            width: 160px;
        }
        em{
            display: block;
            font-style: normal;
            color: #f60;

        }
        strong{
            color: #f60;
        }
    </style>
</head>
<body>
    <div id="star">
        <span>点击星星评分</span>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span></span>
    <p></p>
    </div>
</body>
</html>
<script>
    $(function(){
       var msg = [
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ];

        var isStar = 0;
        $('li').each(function(index){
           
            $(this).mouseenter(function(){
                showStar($(this).index()+1);

                $('p').html('<em><b>'+($(this).index() +　1) + '</b>分'+ msg[$(this).index()].split('|')[0]+'</em>'+msg[$(this).index()].split('|')[1]);
           
                $('p').offset({left:$('ul').offset().left + $(this).width()*$(this).index()})
           
            })

            $(this).mouseleave(function(){
                showStar(isStar);
                $('p').html('');
            })

            $(this).click(function(){
                showStar($(this).index()+1);
                isStar = $(this).index()+1;
                $('span')[1].innerHTML = '<strong>' +isStar + '分</strong>('+msg[$(this).index()].split('|')[1] + ')';
            })
        })

        function　showStar(index){
           for(var i = 0;i<$('li').length;i++){
               $('li')[i].className = i < index ? 'on' : '';
           }
        }

    })
</script>